/**
 * LinkDialog
 */

 var React = require("react");
 var tool = require("../../../util/tool");
 var storage = require("../../../util/storage");
 var consts = require("../../../util/consts");
 var dataProvider = require("../provider/dataProvider");
 var Validator = require("../../../util/validator/Validator");
 var LinkDialog = React.createClass({
    getInitialProps: function (){
        return {
            root: {},
            data: ""
        }
    },
    getInitialState: function (){
        return {
            website: "",
            error: false,
            isInvalid: true
        }
    },
    componentWillMount: function (){
        var website = this.props.data;
        if (!website) return false;
        this.setState({
            website: website,
            isInvalid: !website.length
        });
    },
    checkValidate: function (){
        var validator = Validator();

        validator.addRule($(this.refs.url), [{
            validator: "empty",
            error: $._("Link address can not empty")
        }, {
            validator: "url",
        }]);

        var errors = validator.execute();
        this.setState({
            error: !!errors
        });
        return !errors;
    },
    handleOnChangeUrl: function (e){
        var node = $(e.target), value = node.val();

        this.data = value;
        this.setState({
            website: this.data,
            isInvalid: !this.data.length,
            error: !this.data.length
        });
    },
    hanleOnSaveUrl: function (e){
        var node = $(e.target), value = node.val(), status = true;

        if (this.checkValidate()){
            this.data = tool.completionUrl(value);
            status = false;
        }

        this.setState({
            isInvalid: status
        });
    },
    handleOnSubmit: function (){
        var root = this.props.root;
        var id = storage.data.selectedWidgetId;
        var widget = dataProvider.getSpecifyWidgetById(id);
        var fromTemplate = this.props.fromTemplate;
        if (this.checkValidate()){
            var widgetExtend = root.state.status.data;
            var content = widget.action.content || "";
            var url = this.data;
            var urlNode = '<a href="'+ url+ '">'+ url +'</a>';
            content = content+urlNode;
            widget.action.content = content; 
            if(fromTemplate){
                root.updateLocaleWidget(widget);
                root.openDialog(consts.WIDGET_TYPE.EXTEND,true , widget ,true);
            } else {
                widgetExtend.editor.html(content);
                root.updateSpecifyWidget(widget);
            }

        }
    },
    componentWillMount: function (){
         this.rStyle = {
             position: "fixed",
             top: "40%",
             left: "50%",
             width: "670px",
             height: "auto",
             marginLeft: "-335px",
             display: "block",
             borderRadius: '5px',
             overflow: 'hidden'
         };
         this.data = this.props.data;
         this.root = this.props.root;
     },
    handleOnCloseDialog: function (){
        var root = this.props.root;
        root.closeDialog();
    },
    render: function (){
        var errorNode = '';
        if (this.state.error){
            errorNode = <div className='dialog-error-tip'>{$._('Link address error')}</div>
        }
        return (
            <dialog ref="dialog" style={this.rStyle} className="btg-modal widget-form">
                <div className="btg-modal-content">
                    <div className="form-horizontal">
                        <div className="widget-form-title">
                            <label>{$._('Add link address')}</label>
                        </div>
                        <div className="form-group">
                            <span>{$._('Web address')}</span>
                            <input ref="url" onChange={this.handleOnChangeUrl} onBlur={this.hanleOnSaveUrl} type="text" className="form-control" value={this.state.website} />
                            {errorNode}
                        </div>
                        <div className="form-group buttons">
                            <button disabled={this.state.isInvalid} onClick={this.handleOnSubmit} type="button">{$._("Confirm")}</button>
                        </div>
                    </div>
                </div>
                <a href="#" onClick={this.handleOnCloseDialog} className="modal-close icon-close"></a>
            </dialog>
        )
    }
 });

 module.exports = LinkDialog;
